﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap.min.css">
    <title></title>
</head>
<body>
    <div class="row">
        <div class="col-md-12" style="text-align: center;"><h1>设备远程开门接口示例</h1></div>
    </div>
    <form class="form-horizontal">
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">提示:</label>
            <div class="col-sm-8">
                <label for="inputEmail3" class="control-label">远程开门</label>
            </div>
        </div>
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">请求地址:</label>
            <div class="col-sm-8 input-group" style="padding-left:15px;padding-right:15px">
                <!--<span class="input-group-addon" id="basic-addon3">https://www.facedata.vip:9901/</span>-->
                <input type="text" class="form-control" id="SN" placeholder="设备SN">
                <span class="input-group-addon" id="basic-addon2">/OpenDoor</span>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="button" onclick="OpenDoor()" class="btn btn-default">开门</button>
            </div>
        </div>
        <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">发送参数:</label>
            <div class="col-sm-8">
                <textarea class="form-control" id="Param" style="height:200px" placeholder="发送参数"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">返回结果:</label>
            <div class="col-sm-8">
                <textarea class="form-control" id="Result" style="height:200px;" placeholder="返回结果"></textarea>
            </div>
        </div>
    </form>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="jquery.min.js"></script>
</body>
</html>
<script type="text/javascript">
    function OpenDoor() {

        var sn = $("#SN").val();
        if (sn.length != 16) {
            alert("请输入16位SN号");
            return;
        }
        var url = "/" + sn + "/OpenDoor";
        $("#Param").val(url);
        $.ajax({
            type: "POST",
            url: url,
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            success: function (message) {
                //  alert(message);
                $("#Result").val(JSON.stringify(message));
            }
        })

    }

</script>